<template>
  <div>
    <h1>统计总览:</h1>
    <div class="card-container">
       <!-- 每个 el-card 都是一个包含图表的卡片 -->
      <el-card class="card" style="max-width: 480px">
        <template #header> 
          <div class="card-header">
            <span>考试次数（条形图）</span>
          </div>
        </template>
        <div ref="examNumbersBarChart" style="height: 400px"></div>
      </el-card>

      <!-- 其他卡片类似，只是内容和引用不同 -->
      <el-card class="card" style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>考试次数（饼图）</span>
          </div>
        </template>
        <div ref="examNumbersPieChart" style="height: 400px"></div>
      </el-card>

      <el-card class="card" style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>考试通过率（折线图）</span>
          </div>
        </template>
        <div ref="examPassRatesLineChart" style="height: 400px"></div>
      </el-card>

      <el-card class="card" style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span>考试通过率（散点图）</span>
          </div>
        </template>
        <div ref="examPassRatesScatterChart" style="height: 400px"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, nextTick } from "vue";
import http from "@/utils/request"
import * as echarts from "echarts";

// 使用 inject 从父组件注入 $http ($http 实例)
// const $http = inject("$http");

// 定义响应式变量来保存数据
const examNumbers = ref([]);
const examPassRates = ref([]);


// 定义引用来指向 DOM 元素
const examNumbersBarChart = ref(null);
const examNumbersPieChart = ref(null);
const examPassRatesLineChart = ref(null);
const examPassRatesScatterChart = ref(null);

// onMounted 生命周期钩子在组件挂载后执行
onMounted(async () => {
  try {
   
     // 获取考试次数数据
    const examNumbersResponse = await http.request({
      url: "/teacher/getExamNumbers",
      method:'get'
    });
   
    if (examNumbersResponse.data && examNumbersResponse.data.code === 200) {
      const names = examNumbersResponse.data.data[0].split(",");
      const counts = examNumbersResponse.data.data[1].split(",");
      examNumbers.value = names.map((name, index) => ({
        name,
        count: parseInt(counts[index], 10),
      }));
      console.log("考试次数:", examNumbers.value);


      // 确保 DOM 更新后再绘制图表
      await nextTick();
      drawExamNumbersBarChart();
      drawExamNumbersPieChart();
    } else {
      console.error("Failed to fetch exam numbers:", examNumbersResponse);
    }

   // 获取考试通过率数据
    const examPassRatesResponse = await http.request({
      url: "/teacher/getExamPassRate",
      method:"get"
    });
      
   

    if (examPassRatesResponse.data && examPassRatesResponse.data.code === 200) {
      const names = examPassRatesResponse.data.data[0].split(",");
      const rates = examPassRatesResponse.data.data[1].split(",");
      // 用来将获取的考试通过率数据，存储在 examPassRates 响应式变量中
      examPassRates.value = names.map((name, index) => ({
        name,
        // 字符串转换为浮点数（绘图）
        rate: parseFloat(rates[index]),
      }));
      console.log("考试通过率:", examPassRates.value);

       // 确保 DOM 更新后再绘制图表，获取考试通过率数据
      await nextTick();
      // 折线图
      drawExamPassRatesLineChart();
      // 散点图
      drawExamPassRatesScatterChart();
    } else {
      console.error("无法获取考试通过率:", examPassRatesResponse.data.data);
    }
  } catch (error) {
    console.error("获取数据时出错:", error);
  }
});

// 以下是绘制图表的函数

// 绘制考试人数柱状图

const drawExamNumbersBarChart = () => {
  const chart = echarts.init(examNumbersBarChart.value);

  const option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: examNumbers.value.map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "次数",
        type: "bar",
        data: examNumbers.value.map((item) => item.count),
      },
    ],
  };

  chart.setOption(option);
};

// 绘制考试通过率饼图
const drawExamNumbersPieChart = () => {
  const chart = echarts.init(examNumbersPieChart.value);

  const option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "次数",
        type: "pie",
        radius: "50%",
        data: examNumbers.value.map((item) => ({
          name: item.name,
          value: item.count,
        })),
      },
    ],
  };

  chart.setOption(option);
};

// 绘制考试通过率折线图

const drawExamPassRatesLineChart = () => {
  const chart = echarts.init(examPassRatesLineChart.value);

  const option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: examPassRates.value.map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "通过率",
        type: "line",
        data: examPassRates.value.map((item) => item.rate),
      },
    ],
  };

  chart.setOption(option);
};

// 绘制考试通过率散点图
const drawExamPassRatesScatterChart = () => {
  const chart = echarts.init(examPassRatesScatterChart.value);

  const option = {
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      type: "category",
      data: examPassRates.value.map((item) => item.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "通过率",
        type: "scatter",
        data: examPassRates.value.map((item) => ({
          name: item.name,
          value: item.rate,
        })),
      },
    ],
  };

  chart.setOption(option);
};
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
}

.card {
  flex: 1 1 calc(50% - 20px); /* 使卡片占用 50% 的宽度，并减去间隔 */
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}
</style>
